<!--
 * @Author: your name
 * @Date: 2020-01-04 14:33:06
 * @LastEditTime : 2020-01-04 19:43:59
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \team9_shop\src\components\news\newsmore.vue
 -->
<template>
  <div>
    <div class="box" v-for="item in listmore" :key="item.id">
      <h3>{{item.title}}</h3>
      <div class="top">
        <span class="time">发表时间:{{item.add_time.substring(0,10)}}</span>
        <span class="count">点击次数{{item.click}}</span>
      </div>
      <div v-html="listmore[0].content"></div>
      <comment></comment>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";

export default {
  data() {
    return {
      // 新闻详情数据
      listmore: []
    };
  },
  created() {
    this.getnewsMore();
  },
  computed: {
    ...mapState(["articleId"])
  },
  methods: {
    // 获取新闻详细资讯
    getnewsMore() {
      const { data: res } = axios
        .get("/api/getnew/" + this.articleId)
        .then(res => {
          if (res.data.status !== 0) {
            return this.$notify({
              type: "danger",
              message: "获取详细信息失败"
            });
          }
          console.log(res.data);
          this.listmore = res.data.message;
          console.log(this.listmore);
        });
    }
  }
};
</script>
<style lang="less" scoped>
h3 {
  text-align: center;
  font-size: 14px;
  color: #1989fa;
  line-height: 30px;
  margin: 0;
}
span {
  font-size: 13px;
  color: #1989fa;
  padding: 10px 0;
}
.box {
  padding: 0 10px;
  margin-bottom: 50px;
}
.top {
  border-bottom: 1px solid #eee;
  padding: 7px 0;
  display: flex;
  justify-content: space-between;
}
</style>